{% extends 'system_template/public/base_main.html' %}
{% block cite %}
    订单详情列表
{% endblock %}
{% block head %}
    <style>
        .layui-inline a:hover {
            background: #67c23a;
            border-color: #67c23a;
            color: #fff
        }

        .layui-inline a {
            background: #f0f9eb;
            border-color: #c2e7b0;
            color: #67c23a;
        }
    </style>
{% endblock %}
{% block content %}
    <form class="layui-form search">
        <div class="layui-inline layui-show-xs-block">
            <input type="text" name="search" placeholder="输入系统订单编号" class="layui-input">
        </div>
        <div class="layui-inline layui-show-xs-block">
            <button class="layui-btn layui-btn-normal"><i class="layui-icon"></i>查询</button>
        </div>
        <div class="layui-inline layui-show-xs-block" style="float: right;">
            <a class="layui-btn" href="javascript:;" id="on_select"><i class="layui-icon"></i>在线查询</a>
        </div>
    </form>
    <table class="layui-table layui-form">
        <thead>
        <tr>
            <th>买家登录ID</th>
            <th>买家用户ID</th>
            <th>购买内容ID</th>
            <th>支付宝编号</th>
            <th>订单编号</th>
            <th>订单金额</th>
            <th>购买时间</th>
            <th>查看内容</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody>
        {% for data in data_list %}
            <tr>
                <td>{{ data.buyer_logon_ID }}</td>
                <td>{{ data.buyer_user_ID }}</td>
                <td>{{ data.pro.sub_uuid }}</td>
                <td>{{ data.trade_no }}</td>
                <td>{{ data.out_trade_no }}</td>
                <td>{{ data.total_amount }}</td>
                <td>{{ data.send_pay_date }}</td>
                <td><a href="{{ url_for('webapp_bp.article_page',uid=data.pro.sub_uuid) }}" class="layui-btn layui-btn-xs layui-btn-radius" target="_blank"
                       style="background-color: #67c23a;padding: 0 10px;border-color: #67c23a;">查看</a></td>
                <td>{{ data.message }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>


    {% if page.pages>1 %}
        <div class="layui-card-body ">
            <div class="page">
                <div>
                    <a {% if page.has_prev %}class="next" href="?page={{ page.prev_num }}" {% else %}class="layui-btn-disabled"{% endif %}>上一页</a>
                    {% for pg in page.iter_pages(2,2,2,2) %}
                        {% if page.page==pg %}
                            <span class="current">{{ pg }}</span>
                        {% else %}
                            {% if pg %}
                                <a class="num" href="?page={{ pg }}">{{ pg }}</a>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                    {% if not page.pages==page.page %}
                        <a class="num" href="?page={{ page.pages }}">最后一页</a>
                    {% endif %}
                    <a {% if page.has_next %}class="next" href="?page={{ page.next_num }}" {% else %}class="layui-btn-disabled"{% endif %}>下一页</a>
                </div>
            </div>
        </div>
    {% endif %}
    <div class="layui-layer-shade" style="z-index: 10; background-color: rgb(0, 0, 0); opacity: 0.3;display: none"></div>
    <div class="layui-layer layui-layer-page layui-layer-rim" style="z-index: 11; width: 420px; height: 240px; top: 36%; left: 36%;display: none">
        <div class="layui-layer-title">订单在线查询</div>
        <div class="layui-layer-content" style="height: 197px;">
            <div style="padding: 10px;">
                <form id="aliSelect">
                    <div class="layui-form-item">
                        <label class="layui-form-label">系统订单:</label>
                        <div class="layui-input-block">
                            <input type="text" name="order_id" placeholder="请输入系统订单编号" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付宝订单:</label>
                        <div class="layui-input-block">
                            <input type="text" name="trade_no" placeholder="请输入支付宝订单编号" class="layui-input" style="width: 90%">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <a class="layui-btn" id="on_sub">立即提交</a>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <span class="layui-layer-setwin"><a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a></span></div>
{% endblock %}
{% block footer %}
    <script>
        $(function () {
            $('#on_select').on('click', function () {
                $('.layui-layer').show();
                $('.layui-layer-shade').show();
                document.getElementById("aliSelect").reset();
            });
            $('.layui-layer-close').on('click', function () {
                $('.layui-layer').hide();
                $('.layui-layer-shade').hide()
            });
            $('.layui-layer-shade').on('click', function () {
                $('.layui-layer').hide();
                $(this).hide()
            });
            $('#on_sub').on('click', function () {
                var data = $("#aliSelect").serializeArray();
                $.ajax({
                    type: 'POST',
                    url: '{{ url_for('sys_bp.query_order') }}',
                    data: data,
                    dataType: "json",
                    success: function (data) {
                        if (data.status === 0) {
                            layer.msg(data.msg, {icon: 1, time: 2000});
                            setTimeout(function () {
                                self.location.href = "{{ url_for('sys_bp.order_list') }}?search=" + data.data.out_trade_no
                            }, 2000);
                        } else {
                            layer.msg('查询失败: ' + data.msg, {icon: 2, time: 3000});
                        }
                    }, error: function (data) {
                        layer.msg('查询订单异常!', {icon: 7, time: 2000});
                    }
                });
                return status;
            })
        })
    </script>
{% endblock %}
